<template>
  <view class="home">
    <view class="fixbox" :style="{ height: fixboxHeight + 'px' }">
      <view class="fix">
        <top-status></top-status>
        <view class="tabs">
          <image class="logoimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722324219256602.png"
            mode=""></image>
        </view>
      </view>
    </view>

    <view class="topBox">
      <view class="citybox" @click="toSelectCity">
        <image class="addimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17222188505301315.png"
          mode="widthFix"></image>
        <view class="citytext">{{ city || "全国" }}</view>
        <image class="rimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722321963619823.png"
          mode="widthFix"></image>
      </view>
      <view class="topScreenBox">
        <view class="searchCell">
          <image src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17223220081261131.png" class="searchimg">
          </image>
          <view class="scInp">
            <input type="text" v-model="searchContent" placeholder="请输入圈子/活动名称" maxlength="10" placeholder-class="placname"
              @input="blurSearch" />
          </view>
          <view class="scBtnBox">
            <view class="scSumBtn" @click="subSearch">搜索</view>
          </view>
        </view>
      </view>
      <view class="morebox" @click="switchSport">
        <image v-if="!showSearch" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17223220574571245.png"
          class="downarr"></image>
        <image v-else src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17223220574571245.png"
          class="downarr"></image>
        <view class="moretext">更多</view>
      </view>
    </view>

    <view class="container">
      <swiper class="swiper" :autoplay="true" circular>
        <swiper-item v-for="item in bannerList" :key="item.ID">
          <view class="bannerImageBox" @click="gotobanner(item)">
            <image class="adverimg" :src="item.Banner" mode="widthFix"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="stickybox" :style="{ top: fixboxHeight + 'px' }">
      <view class="circlebox">
        <view class="cnamebox">
          <view class="cname" v-for="(item, index) in sortlist" :key="index" @click="sortswic(index)">
            <image class="cirimg" :src="sortindex == index ? item.ValueStr.split(',')[1] : item.ValueStr.split(',')[0]">
            </image>
            <view class="cirtext" :class="{ 'text6': sortindex == index }">{{ item.Code }}</view>
          </view>
        </view>
        <!-- <view class="cirmoreimg">
          <image class="cirmore" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722222245724471.png">
          </image>
        </view> -->

      </view>
      <view class="createadd" @click="gotocir">
        <image class="creimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716545108243136.png"></image>
        <view class="cretext">发布</view>
      </view>
    </view>
    <view class="load" v-if="!load">
      <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
    </view>
    <view class="cirlistBox" v-else>
      <block v-if="teamlist.length > 0">
        <view class="cirlist" v-for="(item, index) in teamlist" :key="index"
          :style="item.Logo ? 'background-image: url(' + (item.Logo) + ');background-size: cover;background-repeat:no-repeat;' : 'background-color:#fff'"
          @click="nav_to('/pages/together/cirDetail?id=' + item.ID)">

          <view class="cirinfobox">
            <image class="hdimg" :src="item.Logo ? item.Logo : ''" mode="aspectFill"></image>
            <view class="cirinfo">
              <view class="cirname">{{ item.TeamName ? $util.entitiesToUtf16(item.TeamName) : '' }}</view>
              <view class="cirrem hiddenText">{{ $util.entitiesToUtf16(item.Tips) }}</view>
            </view>
            <!-- <view class="cirquit" v-if="item.IsJoin == 1" @click.stop="quitTeam(item, index)">
          <view class="jointext">退出</view>
        </view> -->
            <view v-if="item.IsJoin == 0" class="cirjoin" @click.stop="JoinTeam(item.ID, index)">
              <image class="joinimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716545108243136.png">
              </image>
              <view class="jointext">加入</view>
            </view>
            <view v-if="item.IsTeamAdmin == 1 && item.Status == 0" class="cirjoin">
              <view class="jointext">审核中</view>
            </view>
            <view v-if="item.IsTeamAdmin == 1 && item.Status == -1" class="cirjoin" @click.stop="nav_to('/pages/together/cir_edit?id=' + item.ID)">
              <view class="jointext" style="font-size: 20rpx;">重新编辑</view>
            </view>
          </view>
          <view class="activitybox">
            <block v-if="item.PartList.length > 0 && item.Status != -1">
              <view class="actcon" v-for="(value, i) in item.PartList" :key="i"
                @click.stop="nav_to('/pages/ball/ball_details?id=' + value.ID)">
                <image class="actimg" :src="value.Images ? value.Images.split(',')[0] : ''" mode="aspectFill"></image>
                <view class="actright">
                  <view class="actname">{{ $util.entitiesToUtf16(value.Title) }}</view>
                  <view class="actgup">
                    <image class="actgupimg"
                      src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722252582451895.png"></image>
                    <view class="actguptext hiddenText">{{ `${getTime2(value.ServerDate)} ${getWeek(value.ServerDate)}
                      ${value.ServerTime}` }}</view>
                  </view>
                  <view class="actgup">
                    <image class="actgupimg"
                      src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152361921951044.png"></image>
                    <view class="actguptext hiddenText">{{ value.Place }}</view>
                  </view>
                  <view class="actgup2">
                    <view class="peoplenum">{{ value.Item ? value.Item.length + '人' : '0人' }}</view>
                    <!-- <image class="peoImg" src=""></image> -->
                    <view class="imgbox" v-if="imglist1(value.Item).length > 0">
                      <image class="peoImg" v-for="(items, is) in imglist1(value.Item)" :key="is"
                        :src="items.HeadImgUrl" mode="aspectFill"></image>
                    </view>
                  </view>
                </view>
              </view>
            </block>
            <block v-if="item.Status == -1 && item.IsTeamAdmin == 1">
              <view class="refBox">
                <view class="dectitle">未通过原因（请重新编辑圈子信息再次提交审核）：</view>
                <view class="dectext">{{ item.AuditRemark }}</view>
              </view>
            </block>
          </view>
          <view class="blackshadow"></view>
        </view>
        <view style="height: 100rpx;"></view>
      </block>
      <block v-else>
        <view class="empty">
          <u-empty mode="list" width="100" height="100"
            icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png" :show="true"
            iconSize="32" :text="sortindex == 0 ? '暂无圈子' : '暂无数据'"></u-empty>
        </view>
      </block>
    </view>
    <uni-popup type="center" ref="publishBox">
      <view class="pbBox">
        <view class="bpbimg">
          <image src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722598453562642.png" mode="widthFix" />
        </view>
        <view class="bpbTitle">提示</view>
        <view class="bpbTips">您还没有创建圈子不可以发布活动<br>快去创建圈子吧！</view>
        <view class="bpbBtnBox">
          <view class="bpbgoBtn" @click="goAddCir()">去创建圈子</view>
          <view class="bpbClose" @click="closePB()">取消</view>
        </view>
      </view>
    </uni-popup>
    <uni-popup type="center" ref="cirishBox">
      <view class="cirPop">
        <view class="cirTitle">点击选择圈子发布活动</view>
        <block v-for="(item, index) in myCirList" :key="index">
          <view class="cirPoplist" @click.stop="gotoBall(item)"
            :style="'background-image: url(' + (item.Logo ? item.Logo : '') + ');background-size: cover;background-repeat:no-repeat;'">
            <view class="cirinfobox">
              <image class="hdimg" :src="item.Logo ? item.Logo : ''" mode="aspectFill"></image>
              <view class="cirinfo">
                <view class="cirname">{{ item.TeamName ? $util.entitiesToUtf16(item.TeamName) : '' }}</view>
                <view class="cirrem hiddenText">{{ item.Tips ? $util.entitiesToUtf16(item.Tips) : '' }}</view>
              </view>
            </view>
            <view class="databox">
              <view class="datatltie">
                <view class="datanum">{{ item.HotValue }}</view>
                <view class="datatext">挥力值</view>
              </view>
              <view class="datatltie">
                <view class="datanum">{{ item.BrowserNum }}</view>
                <view class="datatext">浏览</view>
              </view>
              <view class="datatltie">
                <view class="datanum">{{ item.MemberNum }}</view>
                <view class="datatext">成员</view>
              </view>
            </view>

            <view class="blackshadow"></view>
          </view>
        </block>
      </view>
    </uni-popup>
    <view class="registerbox" v-if="showsign == 0">
      <image class="regimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716357264556509.png"
        mode="widthFix">
      </image>
      <view>
        <view class="regtitle_1">欢迎来到挥友圈</view>
        <view class="regtitle_2">赶紧注册来认识更多挥友吧</view>
      </view>
      <view class="regbtn" @click="nav_to('/pages/start/start2')">注册领好礼</view>
    </view>
  </view>
</template>

<script>
import xScroll from "@/components/x-scroll/x-scroll.vue";
import topStatus from "@/components/topStatus/topStatus.vue";
import { mapState } from 'vuex'
export default {
  components: {
    topStatus,
    xScroll,

  },
  data() {
    return {
      showsign: 1,
      sortindex: 1,
      sortlist2: [],
      sortlist: [
        {
          Code: '我的圈子',
          icon: 'https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722327119248846.png',
          color_icon: 'https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722327131466757.png',
          ValueStr: 'https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722327119248846.png,https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722327131466757.png'
        },

      ],
      teamlist: [],

      user: {}, //个人信息
      userinfo: {}, // 完整的个人信息
      load: false, //是否加载
      city: "", //当前城市
      PageIndex: 1, //页码
      PageSize: 10, //请求条数
      list: [], //(发现/我的)列表数组
      oldList: [], //旧数组(暂时不知道干吗)
      isMore: true, //是否加载更多
      latitude: null, //纬度
      longitude: null,
      CompanyID: 6002, //公司Id
      SortField: "", //排序字段
      SortType: "", //排序类型
      ServerDate: null, //日期查询

      nav: [
        { ID: 1, Name: "最新" },
        { ID: 2, Name: "附近" },
      ],
      navIndex: 0,
      navType: "",

      ossPath: "",
      ossWatermark: '',
      bannerList: [
        //轮播图列表
      ],
      swiperHeight: 228, //轮播图高度
      searchContent: "", //搜索内容
      showSearch: false,
      searchHeight: 0,//搜索box的高度
      isTech: -1, // 是否是教练
      fixboxHeight: 88,//fixbox高度
      myCirList: [],//我创建的圈子数组
      huiNum: 1,//加入圈子所需挥豆
      canChoose: true,//能否切换
    };
  },
  watch: {
    //  tab标签发生变化
    tabInd(newVal) {
      this.init();
    },
  },
  async onShow() {
    this.user = uni.getStorageSync("user");
    this.auth = uni.getStorageSync("user").IsAuth;
    const showMy = uni.getStorageSync('showMyCircle') || 0
    if (showMy == 1) {
      this.sortswic(0)
      uni.setStorageSync('showMyCircle', 0)
    }
    
    this.showsign = this.auth
    let that = this;
    uni.$on("getSelectCity", function (data) {
      if (data.name) {
        if (data.name == '全国') {
          that.city = data.name || that.city;
        } else {
          that.city = data.name + '市' || that.city;
        }
        that.list = [];
        that.PageIndex = 1;
        that.getteam()
      }
    });
    if (this.sortindex == 0) {
      this.getteam()
    }
    this.getMycirInfo()
    this.getHeight()
    this.oldList = [];
  },
  async onLoad(e) {
    if (e.pid) {
      uni.setStorageSync("pid", e.pid);
    }
    this.user = uni.getStorageSync("user");
    // this.getcirtype()
    this.GetSportTag()
    this.getJoinNum()
    this.GetBanner();
    this.getSearchHeight();
    await this.getCity();
    this.getteam()
    //app注释
    this.getHeight()
    this.ossPath = this.$ossPath;
    this.ossWatermark = this.$ossWatermark
    // this.getIsTeacher()
    this.getMycirInfo()
  },

  onUnload() {
    uni.$off("send");
  },
  //下拉刷新
  onPullDownRefresh() {
    this.PageIndex = 1
    this.getteam()
    uni.stopPullDownRefresh()
  },
  // 触底事件
  onReachBottom() {
    if (this.isMore) {
      this.PageIndex++
      this.getteam()
    }
  },
  methods: {
    async GetSportTag(){
      let res = await this.$api.post('Team/GetSportTag',{
        Type:'SportType'
      })
      if (res.code == 0) {
        this.sortlist = this.sortlist.concat(res.data)
      }
    },
    // 获取加入圈子需要多少挥豆
    async getJoinNum() {
      let res = await this.$api.post("Common/GetServerPrice", {
        Item: '加入圈子'
      })
      if (res.code == 0) {
        this.huiNum = res.data.Score || 0
      }
    },
    // 获取.fixbox高度
    getHeight() {
      let that = this;
      setTimeout(() => {
        const query = uni.createSelectorQuery().in(that);
        query.select('.fix').boundingClientRect(data => {
          if (data) {
            // data.height 就是元素的高度
            that.fixboxHeight = data.height;
          }
        }).exec();
      }, 500);

    },
    // 轮播图跳转
    gotobanner(item) {
      if (this.user.IsAuth == 0) {
        this.nav_to('/pages/start/start2')
      } else {
        if (item.GoUrl == "/pages/teacher/Settled") {
          if (this.isTech == -1) {
            this.nav_to(item.GoUrl)
          } else {
            this.$pv.msg('您已经是教练');
            return
          }
        } else {
          this.nav_to(item.GoUrl)
        }

      }
    },
    // 判断是不是教练
    async getIsTeacher() {
      let res = await this.$api.post("Technicians/Get");
      if (res.code == 0) {
        if (res.data) {
          uni.setStorageSync('isTech', res.data.Status)
          this.isTech = res.data.Status;
        }
      }
    },
    imglist1(e) {
      if (!e) {
        return []
      }
      let list = e.slice(0, 6)
      return list
    },
    getTime2(l) {
      let d = new Date(l);
      let timestamp = d.getTime();
      return this.$u.date(timestamp, 'mm-dd');
    },
    async getcirtype() {
      let res = await this.$api.post("Catalog/GetDictionary", {
        Type: 'SportType',
      });
      if (res.code == 0) {
        this.sortlist = this.sortlist.concat(res.data)
      }

    },
    //圈子类型切换
    sortswic(index) {
      if (this.canChoose) {
        this.canChoose = false
        this.sortindex = index
        this.isMore = true
        this.teamlist = []
        this.getteam()
      }

    },
    //创建圈子
    gotocir() {
      let _this = this
      if (this.user.IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还未注册，请先注册",
          confirmText: "确定",
          success: function (res) {
            if (res.confirm) {
              _this.nav_to("/pages/start/start2");
              return
            } else if (res.cancel) {
            }
          },
        });
      } else {
        if (this.myCirList.length > 1) {
          this.$refs.cirishBox.open()
        } else if (this.myCirList.length == 1) {
          this.nav_to('/pages/ball/ball_add?golfType=0&id=' + this.myCirList[0].ID)
        } else {
          this.$refs.publishBox.open()
        }
      }
    },
    // 点击圈子去发布活动
    gotoBall(item) {
      this.nav_to('/pages/ball/ball_add?golfType=0&id=' + item.ID)

      this.$refs.cirishBox.close()
    },
    // 点击去创建圈子
    goAddCir() {
      this.nav_to('/pages/together/cir_add')
      this.closePB()
    },

    // 关闭去创建圈子的弹窗
    closePB() {
      this.$refs.publishBox.close()
    },
    //加入圈子
    async JoinTeam(id, index) {
      let _this = this
      if (this.user.IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还未注册，请先注册",
          confirmText: "确定",
          success: function (res) {
            if (res.confirm) {
              _this.nav_to("/pages/start/start2");
            } else if (res.cancel) {
            }
          },
        });
      } else {
        uni.showModal({
          title: "温馨提示",
          content: `加入圈子将消耗${this.huiNum}个挥豆，您确定要加入该圈子吗？`,
          confirmText: "确定",
          success: async function (res) {
            if (res.confirm) {
              let res1 = await _this.$api.post("Team/JoinTeam", {
                ID: id
              })
              if (res1.data) {
                _this.$pv.msg(res1.message || '加入成功，请等待审核~');
                // _this.teamlist[index].IsJoin = 1
              } else {
                _this.$pv.msg(res1.message);
              }
            } else if (res.cancel) {
            }
          },
        });
      }
    },
    // 退出圈子
    quitTeam(item, index) {
      let _this = this;
      if (this.user.IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还未注册，请先注册",
          confirmText: "确定",
          success: function (res) {
            if (res.confirm) {
              _this.nav_to("/pages/start/start2");
            } else if (res.cancel) {
            }
          },
        });
        return
      }
      if (item.IsTeamAdmin == 1) {
        _this.$pv.msg("圈主无法退出");
        return
      }
      uni.showModal({
        title: "温馨提示",
        content: "您确定要退出该圈子吗？",
        confirmText: "确定",
        success: async function (res) {
          if (res.confirm) {
            let res1 = await _this.$api.post("Team/Quit", {
              TeamID: item.ID
            })
            if (res1.data) {
              _this.$pv.msg("退出成功");
              _this.teamlist[index].IsJoin = 0
            } else {
              _this.$pv.msg(res1.message);
            }
          } else if (res.cancel) {
          }
        },
      });
    },
    //我的圈子
    async MyTeam() {
      this.teamlist = []
      let res = await this.$api.post("Team/MyTeam", {
      })
      if (res.code == 0) {
        this.teamlist = res.data
        this.load = true
        this.isMore = false
      }
      this.canChoose = true
      uni.hideLoading();
    },
    //圈子列表
    async getteam() {
      uni.showLoading({
        title: '加载中'
      });
      //如果是0就调用
      if (this.sortindex == 0) {
        this.MyTeam()
        return
      }
      let res = await this.$api.post("Team/PageList", {
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
        City: this.city == '全国' ? '' : this.city,
        TeamName: this.searchContent,
        LeaderID: this.user.UserID,
        Tag: this.sortlist[this.sortindex]?.Code ? this.sortlist[this.sortindex].Code : ''
      })
      if (res.code == 0) {
        if (this.PageIndex == 1) {
          this.teamlist = res.data
        } else {
          this.teamlist = this.teamlist.concat(res.data)
        }
        this.load = true
        this.isMore =
          Array.isArray(res.data) && res.data.length >= this.PageSize;
      }
      this.canChoose = true
      uni.hideLoading();

    },
    async getUserInfo() {
      let u = uni.getStorageSync('user');
      let res = await this.$api.post('User/GetUserInfo', {
        ID: u.UserID
      });
      if (res.code == 0) {
        this.userinfo = res.data
        uni.setStorageSync('user', this.userinfo);
      }

    },

    // 切换筛选
    switchSport() {
      this.nav_to('/pages/together/cir_more')
    },
    //空白搜索
    blurSearch() {
      if (this.searchContent == '') {
        this.PageIndex == 1
        this.getteam()
      }

    },
    // 点击搜索
    subSearch() {
      this.getteam()
    },

    // 获取搜索box高度
    getSearchHeight() {
      let that = this
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".fakeBox")
        .boundingClientRect((data) => {
          if (data) {
            // data.height 是元素的高度
            that.searchHeight = data.height
          }
        })
        .exec();
    },


    async GetBanner() {
      let res = await this.$api.post("/Banner/GetBanner", {
        PageKey: "home-top",
      });
      if (res.code == 0) {
        if (res.data) {
          this.bannerList = res.data;
          // console.log(res, 'res');
        }
      }
    },

    // 获取页面配置信息
    async getPageInfo() {
      let res = await this.$api.post("Module/List", {
        Type: 2,
      });
      const { code, data, message } = res;
      if (code == 0) {
        this.nav = data || this.nav;
      }
    },



    toSelectCity() {
      const hotCitys = "";
      uni.navigateTo({
        url: "/pages/city/cityList",
      });
    },
    // 获取定位
    getLocationSysc() {
      let _this = this;
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: "gcj02",
          success: function (res) {
            resolve(res);
          },
          fail: function (err) {
            const defaultLocation = {
              latitude: 0,
              longitude: 0,
            };
            resolve(defaultLocation);
          },
        });
      });
    },
    // 获取当前地址并解析
    async getCity() {
      let loc = await this.getLocationSysc();

      let longitude = loc.longitude;
      this.longitude = loc.longitude;
      let latitude = loc.latitude;
      this.latitude = loc.latitude;
      let o = {
        longitude,
        latitude,
      };
      let res = await this.$util.getAddress(o);
      console.log(res, 'dddd');
      let City = res.result.address_component.city
      // this.city = City.replace(/省|市|自治区|特别行政区|壮族|回族|维吾尔/g, "")
    },

    // 获取我创建的圈子信息
    async getMycirInfo() {
      let res = await this.$api.post("Team/MyCreateTeam");
      if (res.code == 0) {
        this.myCirList = res.data || [];
      }
    },


  },
  onShareAppMessage(res) {
    //发送给朋友
    let pid = uni.getStorageSync("user").UserID;
    let Name = this.$util.entitiesToUtf16(uni.getStorageSync("user").Name);
    return {
      title: `${Name}向您推荐了挥友圈，赶快来吧`,
      path: `/pages/tab/home?pid=${pid}`,
    };
  },
  onUnload() {
    uni.$off("getSelectCity");

  },
  computed: {
    ...mapState(['Refresh']),
  },
};
</script>

<style lang="scss">
.blank_space_view {
  // width: 100rpx;
  height: 350rpx;
}

page {
  background-color: #f6f6f6;
}

view {
  box-sizing: border-box;
}

.container {
  width: 100%;
}

.cirlistBox {
  width: 100%;
  padding: 24rpx;
}

.cirlist {
  position: relative;
  width: 100%;
  height: 548rpx;
  border-radius: 24rpx;
  // padding: 36rpx 32rpx;
  // background-color: #9796ed;
  // margin: 0 auto;
  margin-bottom: 24rpx;

  .cirinfobox {
    position: relative;
    display: flex;
    align-items: center;
    // margin-bottom: 32rpx;
    padding: 36rpx 32rpx;
    z-index: 10;

    .hdimg {
      min-width: 104rpx;
      max-width: 104rpx;
      height: 104rpx;
      border-radius: 16rpx;
      border-radius: 50%;
      border: 4rpx solid #FFFFFF;
      margin-right: 24rpx;
    }

    .cirinfo {
      flex: 1;

      .cirname {
        font-size: 32rpx;
        font-weight: bold;
        color: #fff;
        margin-bottom: 16rpx;
      }

      .cirrem {
        width: 400rpx;
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }

    .cirjoin {
      width: 120rpx;
      height: 56rpx;
      background: #6C6AFF;
      border-radius: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .joinimg {
        width: 24rpx;
        height: 24rpx;
      }

      .jointext {
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }

    .cirquit {
      width: 120rpx;
      height: 56rpx;
      border-radius: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #E4E4E4;

      .joinimg {
        width: 24rpx;
        height: 24rpx;
      }

      .jointext {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }

  .activitybox {
    position: relative;
    width: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 10;
    // padding-right: 32rpx;

    .actcon {
      width: 584rpx;
      height: 336rpx;
      background: #FFFFFF;
      border-radius: 24rpx;
      // margin-right: 30rpx;
      display: flex;
      align-items: center;
      margin-left: 32rpx;
      &:last-child {
        margin-right: 32rpx;
      }
      .actimg {
        width: 256rpx;
        min-width: 256rpx;
        height: 336rpx;
        border-radius: 24rpx 0rpx 0rpx 24rpx;
        // background-color: red;
      }

      .actright {
        // flex: 1;
        padding: 24rpx;
        height: 100%;
        width: 328rpx;
        display: flex;
        flex-flow: column;
        justify-content: space-between;

        .actname {
          font-size: 28rpx;
          font-weight: bold;
          color: #333333;
          margin-bottom: 60rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .actgup {
          display: flex;
          margin-bottom: 8rpx;
          align-items: center;

          .actgupimg {
            width: 32rpx;
            height: 34rpx;
            margin-right: 4rpx;
          }

          .actguptext {
            font-size: 24rpx;
            color: #999999;
            // flex: 1;
            width: 224rpx;
          }
        }

        .actgup2 {
          display: flex;
          margin-top: 26rpx;
          justify-content: flex-end;
          align-items: center;

          .peoplenum {
            font-size: 20rpx;
            color: #999999;
            margin-right: 16rpx;
          }

          .imgbox {
            display: flex;
          }

          .peoImg {
            width: 32rpx;
            height: 32rpx;
            border-radius: 50%;
            margin-left: -9rpx;
            // background-color: #706eee;
          }
        }
      }
    }

    .refBox {
      width: 90%;
      height: 336rpx;
      background: #FFFFFF;
      border-radius: 24rpx;
      margin: 0 auto;
      overflow: auto;
      padding: 24rpx;

      .dectitle {
        font-size: 24rpx;
        color: #333333;
        margin-bottom: 10rpx;
      }

      .dectext {
        font-size: 20rpx;
        color: #f44336;
      }

    }
  }

  .blackshadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 24rpx;
    backdrop-filter: blur(10px);

  }
}

.swiper {
  width: 100%;
  height: 208rpx;

  .bannerImageBox {
    width: 95%;
    height: 208rpx;
    border-radius: 25rpx;
    margin: 0 auto;
    overflow: hidden;

    .adverimg {
      width: 100%;
    }
  }
}

.stickybox {
  position: sticky;
  top: 190rpx;
  z-index: 99;
  background-color: #fff;
  padding: 12rpx 0;
}

.circlebox {
  display: flex;
  align-items: center;
  margin-left: 24rpx;
  margin-top: 32rpx;

  .cnamebox {
    // width: 614rpx;
    width: 100%;
    display: flex;
    align-items: center;
    overflow-x: auto;
  }

  .cname {
    display: flex;
    align-items: center;
    margin-right: 28rpx;

    .cirimg {
      width: 48rpx;
      height: 48rpx;
      // background-color: #706EEE;
      margin-right: 4rpx;
    }

    .cirtext {
      font-size: 28rpx;
      color: #999999;
      width: max-content;
    }

    .text6 {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }
  }

  .cirmoreimg {
    width: 88rpx;
    height: 40rpx;
    // background: linear-gradient( 270deg, #F6F6F6 0%, #D8D8D8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cirmore {
    width: 40rpx;
    height: 40rpx;
    margin-left: 44rpx;
  }
}

.createadd {
  position: fixed;
  left: 42rpx;
  bottom: 50rpx;
  width: 150rpx;
  height: 64rpx;
  background: #706EEE;
  border-radius: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  // margin-left: auto;
  // margin-right: 24rpx;
  // margin-top: 26rpx;

  .creimg {
    width: 30rpx;
    height: 30rpx;
    margin-right: 6rpx;
  }

  .cretext {
    font-size: 28rpx;
    font-weight: bold;
    color: #ffffff;
  }
}

.morebox {
  margin-left: 20rpx;
  text-align: center;

  .moretext {
    font-size: 22rpx;
    font-weight: bold;
    color: #706EEE;
  }

  .downarr {
    width: 48rpx;
    height: 48rpx;
    display: block;
  }

  .uparr {
    width: 16rpx;
    height: 16rpx;
    display: block;
  }
}

.topBox {
  width: 100%;
  // background: linear-gradient(180deg, #deddfc 0%, #ededf9 100%);
  background-color: #ededf9;
  padding: 4rpx 30rpx;
  padding-bottom: 25rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .citybox {
    padding: 18rpx 6rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
    border-radius: 36rpx;
    display: flex;
    align-items: center;
    margin-right: 24rpx;

    .addimg {
      width: 32rpx;
      height: 32rpx;
      margin-left: 10rpx;
      display: block;
    }

    .citytext {
      width: max-content;
      font-size: 24rpx;
      color: #333333;
      font-weight: bold;
      margin: 0 8rpx;
    }

    .rimg {
      width: 32rpx;
      height: 32rpx;
      display: block;
      margin-top: 4rpx;
    }
  }

  .topFastBtn {
    padding: 13rpx 24rpx;
    background: #706eee;
    border-radius: 32rpx;
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    image {
      width: 24rpx;
      height: 24rpx;
    }

    .topFastText {
      font-size: 24rpx;
      color: #ffffff;
    }

    .topFastNum {
      position: absolute;
      top: -16rpx;
      right: -10rpx;
      width: 40rpx;
      background-color: red;
      color: #fff;
      border-radius: 50%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      aspect-ratio: 1/1;
      font-size: 20rpx;
    }
  }
}

.topnav {
  display: flex;
  align-items: flex-start;
  padding: 0 30rpx;
  margin-top: 24rpx;

  // height: 66rpx;
  // overflow: hidden;
  .title {
    font-size: 28rpx;
    color: #333333;
    height: 54rpx;
    display: flex;
    align-items: center;
  }

  .typebox {
    display: flex;
    flex: 1;
    flex-wrap: wrap;

    .bg4 {
      border: 2rpx solid #706EEE;
      background-color: #706EEE !important;
      color: #fff !important;
    }
  }

  .type {
    padding: 8rpx 16rpx;
    color: #706EEE;
    border: 2rpx solid #706EEE;
    font-size: 24rpx;
    margin-right: 12rpx;
    border-radius: 8rpx;
    margin-bottom: 14rpx;
    // background-color: #706EEE;
  }


}


.topScreenBox {
  width: 100%;
  padding: 8rpx 0;

  .searchCell {
    width: 100%;
    height: 72rpx;
    display: flex;
    align-items: center;
    border: 2rpx solid #706EEE;
    border-radius: 36rpx;

    .scIcon {
      margin-right: 16rpx;
    }

    .searchimg {
      width: 32rpx;
      height: 32rpx;
      margin-left: 24rpx;
    }

    .scInp {
      flex: 1;
      margin-left: 5rpx;

      >input {
        width: 100%;
        background: transparent;
      }

      .placname {
        color: #999999;
        font-size: 24rpx;
      }
    }

    .scBtnBox {
      display: flex;
      // margin-left: auto;
      margin-right: 8rpx;

      .scSumBtn {
        padding: 13rpx 34rpx;
        background: #706eee;
        border-radius: 32rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        &:last-child {
          margin-left: 20rpx;
        }
      }
    }
  }

  .tagBox {
    width: 100%;
    // overflow-y: auto;
    margin-top: 20rpx;
    padding-bottom: 20rpx;

    .tagList {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;

      .tagCell {
        padding: 10rpx 20rpx;
        border-radius: 12rpx;
        border: 2rpx solid #706eee;
        background: white;
        color: #706eee;
        margin: 0 20rpx 10rpx;
        margin-left: 0;
        white-space: nowrap;
        font-size: 22rpx;
      }

      .tagIng {
        border: 2rpx solid #706eee;
        background: #706eee;
        color: white;
      }
    }
  }
}

.fakeBox {
  left: 0;
  bottom: 100%;
  transform: translateY(-100%);
  opacity: 0;
}



.fixbox {
  position: relative;
  // height: 190rpx;
}

.fix {
  position: fixed;
  //   background-color: #fff;
  background: linear-gradient(180deg, #deddfc 0%, #ededf9 100%);
  width: 750rpx;
  top: 0;
  left: 0;
  z-index: 999;
  // padding-bottom: 15rpx;

  .endimg {
    width: 32rpx;
    height: 32rpx;
    position: absolute;
    z-index: 1000;
    right: 150rpx;
    bottom: 28rpx;
  }
}

.tabs {
  box-sizing: border-box;
  z-index: 200;
  height: 44px;
  width: 750rpx;
  display: flex;
  align-items: center;
  //   background: #fff;
  // margin-bottom: 20rpx;

  .logoimg {
    margin-left: 24rpx;
    width: 168rpx;
    height: 56rpx;
  }

  .city {
    height: 60rpx;
    // width: 140rpx;
    width: 160rpx;
    margin-right: 6rpx;
    display: flex;
    align-items: center;

    .hlogo {
      //   width: 136rpx;
      //   height: 60rpx;
      width: 48rpx;
      height: 48rpx;
    }

    .link-1 {
      max-width: 96rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;

      .linkcity {
        color: #333333;
      }
    }
  }

  .img2 {
    height: 36rpx;
    width: 36rpx;
    margin-right: 266rpx;

    .zuju {
      color: #333333;
      font-size: 36rpx;
    }
  }

  .tab1,
  .tab2 {
    font-size: 32rpx;
    font-weight: 500;
    margin-right: 30rpx;
    line-height: 44px;
    color: #666666;
  }

  .tab1 {
    margin-left: 126rpx;
  }

  .tab4 {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    position: relative;
  }

  .aft4 {
    width: 64rpx;
    height: 10rpx;
    border-radius: 6rpx;
    background: linear-gradient(180deg, #a9a7f8 0%, #9796ed 100%);
    position: absolute;
    bottom: 8rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}

.home {
  .top {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #1f1f1f;

    .nav {
      height: 44px;
      line-height: 44px;
    }
  }

  .list {
    .item {
      margin-top: 20rpx;
      background: #202020;
      border-radius: 16rpx;
      overflow: hidden;
      padding-bottom: 20rpx;

      .item_hd {
        background: #262626;
        padding-left: 20rpx;
        padding-right: 20rpx;
        display: flex;
        justify-content: space-between;
        height: 100rpx;
        align-items: center;

        .cover {
          height: 72rpx;
          width: 72rpx;
          border: 1px solid #7b7b7b;
          border-radius: 50%;
          overflow: hidden;

          image {
            height: 100%;
            width: 100%;
          }
        }
      }

      .item_bd {
        padding-left: 24rpx;
        padding-right: 24rpx;
        padding-top: 20rpx;
        padding-bottom: 20rpx;

        .lin {
          line-height: 50rpx;
        }

        .imgbox_sm {
          height: 40rpx;
          width: 40rpx;
          display: inline-block;
          vertical-align: middle;
          margin-right: 6rpx;
          font-size: 0;
          margin-left: 6rpx;

          image {
            height: 100%;
            width: 100%;
          }
        }
      }

      .item_ft {
        margin-left: 20rpx;
        margin-right: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 100rpx;
        background: #262626;

        .cover_group {
          display: flex;
        }

        .cover {
          margin-right: -15rpx;
          height: 48rpx;
          width: 48rpx;
          border-radius: 48rpx;
          border: 1px solid #7b7b7b;
          overflow: hidden;

          image {
            height: 100%;
            width: 100%;
          }

          &:last-child {
            margin-right: 0;
          }
        }

        .nums {
          line-height: 28 * 2rpx;
          margin-left: 16rpx;
        }

        .tip {
          margin-left: 16rpx;
        }
      }

      .left {
        display: flex;
        align-items: center;
      }
    }
  }
}

.pbBox {
  width: 544rpx;
  // height: 646rpx;
  background: #ffffff;
  text-align: center;
  border-radius: 26rpx;
  padding: 52rpx;

  .bpbimg {
    width: 152rpx;
    height: 152rpx;
    margin: 0 auto;

    >image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  .bpbTitle {
    font-weight: bold;
    font-size: 36rpx;
    color: #333333;
    margin-top: 48rpx;
    margin-bottom: 40rpx;
  }

  .bpbTips {
    font-weight: 500;
    font-size: 28rpx;
    color: #999999;
    margin-bottom: 36rpx;
  }

  .bpbBtnBox {
    width: 100%;

    .bpbgoBtn {
      width: 100%;
      height: 88rpx;
      background: #706EEE;
      border-radius: 44rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 500;
      font-size: 28rpx;
      color: #FFFFFF;
    }

    .bpbClose {
      width: 100%;
      font-weight: 500;
      font-size: 28rpx;
      color: #999999;
      line-height: 40rpx;
      margin-top: 24rpx;
    }
  }
}

.cirPop {
  width: 644rpx;
  max-height: 1030rpx;
  background-color: #FFFFFF;
  overflow: auto;
  border-radius: 54rpx;
  padding: 40rpx;

  .cirTitle {
    width: 100%;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 20rpx;
  }
}

.cirPoplist {
  width: 100%;

  // height: 548rpx;
  border-radius: 24rpx;
  padding: 36rpx 32rpx;
  // background-color: #9796ed;
  margin: 0 auto;
  margin-top: 24rpx;
  position: relative;

  .blackshadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 24rpx;
    backdrop-filter: blur(10px);

  }

  .cirinfobox {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
    position: relative;
    z-index: 10;

    .hdimg {
      width: 104rpx;
      height: 104rpx;
      // border-radius: 16rpx;
      border-radius: 50%;
      border: 4rpx solid #FFFFFF;
      margin-right: 24rpx;
    }

    .cirinfo {
      flex: 1;

      .cirname {
        font-size: 32rpx;
        font-weight: bold;
        color: #fff;
        margin-bottom: 16rpx;
      }

      .cirrem {
        width: 360rpx;
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }
  }

  .databox {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;

    .datatltie {
      margin-right: 56rpx;
      text-align: center;

      .datanum {
        font-size: 36rpx;
        font-weight: bold;
        color: #EFEFEF;
      }

      .datatext {
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }
  }
}

.registerbox {
  width: 90%;
  height: 128rpx;
  background-color: rgba(0, 0, 0, 0.8);
  // opacity: 0.8;
  border-radius: 24rpx;
  // margin: ;
  position: fixed;
  bottom: 8%;
  left: 4%;
  display: flex;
  align-items: center;
  z-index: 2000;

  .regimg {
    width: 72rpx;
    height: 72rpx;
    margin: 0 16rpx 0 24rpx;
    border-radius: 50%;
  }

  .regtitle_1 {
    font-size: 28rpx;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10rpx;
  }

  .regtitle_2 {
    font-size: 24rpx;
    color: #fff;
    opacity: 0.6;
  }

  .regbtn {
    width: 188rpx;
    height: 60rpx;
    border-radius: 32rpx;
    background-color: #706eee;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
    line-height: 60rpx;
    margin-left: 56rpx;
  }
}
</style>
